<template>
    <div class="main">
        <div class="content1">
            <div class="left">
                <div>
                    <el-input v-model="input" placeholder="请输入代理商查询"></el-input>
                </div>
                <el-button type="primary">查询</el-button>
            </div>
        </div>
        <div class="content2">
            <div class="left">
                <div class="top"><span>代理商区域</span><span>代理商</span><span>操作</span></div>
                <div class="tree">
                    <div class="tree1"><qu-yu></qu-yu></div>
                    <div class="tree2">
                        <div class="row" v-for="(item,index) in form">
                            <span class="sp1" @click="dailishan(index)" :class="{bg:show[index].show}">{{item.name}}</span>
                            <span class="sp2" @click="dailishan(index)" :class="{bg:show[index].show}"><shenhe-sezhi></shenhe-sezhi></span>
                        </div>
                    </div>
                    <div class="tree3"></div>
                </div>
            </div>
            <div class="right">
                <div class="top">
                    审核机制：
                </div>
                <div class="cengjitu">
                    <div class="top1"><span>组织层级</span><span>自动审核</span></div>
                    <div class="content1">
                        <div v-for="item in shenhe"><div class="label">{{item.label}}</div><div><el-checkbox v-model="item.checked"></el-checkbox></div></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import quYu from './quyu'
    import shenheSezhi from './shenhe_sezhi'
    export default {
        name: "index",
        components:{
            'quYu': quYu,
            'shenheSezhi': shenheSezhi
        },
        data() {
            return{
                shenhe:[{label:'代理商',checked:true},{label:'集团',checked:false},{label:'品牌',checked:false},{label:'门店',checked:false},{label:'外来单位',checked:false}],
                input:'',
                btntype:'primary',
                options:'',
                value:'',
                multipleSelection: [],
                form: [{'name':'代理商一','key':1},{'name':'代理商二','key':1},{'name':'代理商三','key':1}],
                show:[{show:true},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}],
            }
        },
        created(){

        },
        methods:{
            dailishan(index) {
                this.show=[{show:false},{show:false},{show:false},{show:false},
                    {show:false},{show:false},{show:false},{show:false}]
                this.show[index].show=true
            },
            css() {
            }
        }
    }

</script>

<style lang="less" scoped>
    .bg{background: #fffece}
    .main{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        .content1{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            margin-bottom: 10px;
            .left{
                display: flex;
                flex-direction: row;
                margin-right: 10px;
                padding-right: 10px;
                div{margin-right: 10px}
            }
        }
        .content2 {
            flex: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            .left{
                width: 500px;
                height: 100%;
                display: flex;
                border-right: 1px solid #dedede;
                flex-direction: column;
                .top{
                    width: 500px;
                    height: 36px;
                    background: #dedede;
                    line-height: 36px;
                    font-size: 14px;
                    span{
                        width: 200px;
                        float: left;
                        height: 36px;
                        display: block;
                        text-align: center;
                    }
                }
                .tree{
                    width: 500px;
                    display: flex;
                    flex-direction: row;
                    flex: 1;
                    background: #ffffff;
                    .tree1{
                        width: 200px;
                    }
                    .tree2{
                        width: 300px;
                        display: flex;
                        flex-direction: column;
                        border: 1px solid #dedede;
                        border-right: 0px;
                        border-top: 0px;
                        .row{
                            display: flex;
                            flex-direction: row;
                            cursor: pointer;
                            .sp1{
                                width: 200px;
                                text-align: center;
                                line-height: 32px;
                                border-bottom: 1px solid #dedede;
                                border-right: 1px solid #dedede;
                            }
                            .sp2{
                                width: 100px;
                                text-align: center;
                                line-height: 30px;
                                border-bottom: 1px solid #dedede;
                            }
                        }
                    }

                }
            }
            .right{
                flex: 1;
                display: flex;
                flex-direction: column;
                .top{
                    width: 388px;
                    text-align: left;
                    padding: 6px;
                    background: #ffffff;
                }
                .cengjitu{
                    width: 400px;
                    .top1{
                        width: 100%;
                        height: 32px;
                        span{
                            width: 200px;
                            float: left;
                            background: #dedede;
                            line-height: 32px;
                            text-align: center;
                        }
                    }
                    .content1{
                        display: flex;
                        flex-direction: column;
                        div{
                            line-height: 46px;
                            border-bottom: 1px solid #dedede;
                            border-right: 1px solid #dedede;
                            display: flex;
                            flex-direction: row;
                            div{
                                flex: 1;
                                justify-content: center;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
